<template>
  <div class="flyingPage-wrap">
    <div class="page">
      <div class="papers" style="--total: 5">
        <div class="paper -rogue" :style="'animation-delay: calc(0 * 0.65s'">
          <div class="segment">
            <div class="segment">
              <div class="segment">
                <div class="segment">
                  <div class="segment"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper" :style="'animation-delay: calc(1 * 0.65s'">
          <div class="segment">
            <div class="segment">
              <div class="segment">
                <div class="segment">
                  <div class="segment"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper" :style="'animation-delay: calc(2 * 0.65s'">
          <div class="segment">
            <div class="segment">
              <div class="segment">
                <div class="segment">
                  <div class="segment"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper" :style="'animation-delay: calc(3 * 0.65s'">
          <div class="segment">
            <div class="segment">
              <div class="segment">
                <div class="segment">
                  <div class="segment"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="paper" :style="'animation-delay: calc(4 * 0.65s'">
          <div class="segment">
            <div class="segment">
              <div class="segment">
                <div class="segment">
                  <div class="segment"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shadow">
        <div class="paper-shadow" :style="'animation-delay: calc(0 * 0.65s'"></div>
        <div class="paper-shadow" :style="'animation-delay: calc(1 * 0.65s'"></div>
        <div class="paper-shadow" :style="'animation-delay: calc(2 * 0.65s'"></div>
        <div class="paper-shadow" :style="'animation-delay: calc(3 * 0.65s'"></div>
        <div class="paper-shadow" :style="'animation-delay: calc(4 * 0.65s'"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>

<style lang="scss" scoped>
*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

* {
  transform-style: preserve-3d;
}


$--duration: 3.2s;
$--stagger: .65s;
$--easing: cubic-bezier(.36,.07,.25,1);
$--offscreen: 130vmax;
$--color-bg: #EF735A;
$--color-blue: #384969;
$--color-shadow: #211842;
$--rotate: 20deg;
$--segment: calc(100% * 1 / 5);
.flyingPage-wrap {
  height:100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $--color-bg;
  overflow: hidden;
}
.page {
  height: 50vmin;
  width: 30vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(25vw) rotateX(-20deg) rotateY(-55deg);
  background: $--color-blue;
  border-radius: 2vmin;
  perspective: 10000px;
  
  &:before {
    border: 10vmin solid white;
    border-left-width: 1vmin;
    border-right-width: 1vmin;
    border-radius: inherit;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: 6vmin solid white;
    border-left-width: 1vmin;
    border-right-width: 1vmin;
    background: $--color-blue;
  }
  
  > .papers, &:before {
    transform: translateZ(3vmin);
  }
  
  &:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
    transform: translateZ(1.5vmin);
  }
  
  > .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    transform: rotateX(90deg);
    background: $--color-shadow;
    border-radius: inherit;
  }
}

.paper-shadow {
  background: $--color-shadow;
  height: 50%;
  width: 100%;
  position: absolute;
  top: calc(100% + 1vmin);
  left: 0;
  transform-origin: top center;
  animation: shadow-in $--duration $--easing infinite;
  animation-fill-mode: both;
  
  @keyframes shadow-in {
    0%,5% {
      transform: scale(.8, 1) translateY($--offscreen);
    }
    100% {
      transform: scale(.8,0);
    }
  }
}

.papers {
  width: 21vmin;
  height: 30vmin;
  background: white;
}

.paper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  
  animation: fly-in $--duration $--easing infinite;

  
  @keyframes fly-in {
    0%, 2% {
      transform: translateZ($--offscreen) translateY(80%) rotateX(30deg);
    }
    70%, 100% {
      transform: translateZ(0px) translateY(0%) rotateX(0deg);
    }
  }
  
  > .segment {
    height: $--segment;
  }
}


.segment {
  height: 100%;
  transform-origin: top center;
  background: white;
  border: 1px solid rgba(black, 0.2);
  border-top: none;
  border-bottom: none;
  > .segment {
    top: 98%;
  }
  animation: inherit;
  animation-name: curve-paper;
  
  @keyframes curve-paper {
    0%, 2% { transform: rotateX($--rotate,0deg); }
    90%, 100% { transform: rotateX(0deg); }
  }

}

/* $--$--$--$--$--$--$--$--$--$--$--$--$--$--$--$--$-- */

.paper.-rogue {
  transform-origin: top center -5vmin;
  
  .segment {
    $--rotate: 30deg;
    animation-name: curve-rogue-paper;

    @keyframes curve-rogue-paper {
      0%, 50% { transform: rotateX($--rotate); }
      100% { transform: rotateX(0deg); }
    }
  }
  
  // First segment of the paper
  > .segment {
    animation: inherit;
    animation-name: rogue-paper;
    transform-origin: left top 20vmin;
  
    @keyframes rogue-paper {
      0%, 2% {
        transform: rotateX(1.5turn) 
      }
      80%, 100% {
        transform: rotateX(0turn);
      }
    }
  }

}
</style>